<template>
    <div>
      <ul>
        <li>欢迎来到小常收银系统 水果店</li>
        <li>香蕉10￥/斤，折扣8折优惠</li>
        <li>请输入你要购买的斤数:<input type="text" v-model="age" value="" /></li>
        <li><button @click="fn()">结账买单</button></li>
        <li>
          结账单：总结<span>{{ str }}</span
          >￥,折后价<span>{{ str1 }}</span
          >￥元 省了：<span>{{ str2 }}</span
          >￥多少元
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return{
  
     age:0,
  
     str:0,
     str1:0,  
    str2:0,
      }
    },methods:{
  fn(){
    this.str=this.age*10,
  this.str1=this.str*0.8,
  this.str2=this.str-this.str1
  }
    }
  
  }
  </script>
  
  <style>
  li {
    width: 100%px;
    height: 50px;
    border: 1px black solid;
  }
  </style>